<template>
    <div class="container">
        <!-- 
            采用iview 的面板和卡片，参考文档
            卡片：https://www.iviewui.com/components/card
            折叠面板：https://www.iviewui.com/components/collapse 
        -->
        <Tabs value="name1">
            <TabPane class="tab1" label="文字信息" name="name1">
                <div class="line">
                    <p>官网名字</p>
                    <div class="input-container">
                        <Input v-model="website_title_ch" placeholder="官网名字" style="width: 300px"></Input>
                    </div>
                    <Button type="primary" class="btn" @click="submit('website_title_ch')">保存</Button>
                </div>
                <div class="line">
                    <p>公司名字</p>
                    <div class="input-container">
                        <Input v-model="company_name" placeholder="公司名字" style="width: 300px"></Input>
                    </div>
                    <Button type="primary" class="btn" @click="submit('company_name')">保存</Button>
                </div>
                <div class="line">
                    <p>公司地址</p>
                    <div class="input-container">
                        <Input v-model="company_address" placeholder="公司地址" style="width: 300px"></Input>
                    </div>
                    <Button type="primary" class="btn" @click="submit('company_address')">保存</Button>
                </div>
                <div class="line">
                    <p>邮政编码</p>
                    <div class="input-container">
                        <Input v-model="zip_code" placeholder="邮政编码" style="width: 300px"></Input>
                    </div>
                    <Button type="primary" class="btn" @click="submit('zip_code')">保存</Button>
                </div>
                <div class="line">
                    <p>联系电话</p>
                    <div class="input-container">
                        <Input v-model="phone_number" placeholder="联系电话" style="width: 300px"></Input>
                    </div>
                    <Button type="primary" class="btn" @click="submit('phone_number')">保存</Button>
                </div>
            </TabPane>
            <TabPane class="tab2" label="图片信息" name="name2">
                <div class="line logo">
                    <p>LOGO</p>
                    <Upload class="btn" action="$api/api/upload/logo" name="logo" :on-success="uploadSuccess" :show-upload-list="false"
                        :on-error="uploadError">
                        <Button type="primary" icon="ios-cloud-upload-outline">上传</Button>
                    </Upload>
                    <img class="img" :src="'$api'+logo_img" alt="">

                </div>
                <div class="line er_code">
                    <p>二维码</p>

                    <Upload class="btn" action="$api/api/upload/er_code" name="er_code" :on-success="uploadSuccess" :show-upload-list="false"
                        :on-error="uploadError">
                        <Button type="primary" icon="ios-cloud-upload-outline">上传</Button>
                    </Upload>
                    <img class="img" :src="'$api'+er_code" alt="">
                </div>
            </TabPane>
            <TabPane label="其他" name="name3"></TabPane>
        </Tabs>

    </div>
</template>
<style lang="less" scoped>
    .container {
        width: 1200px;
        margin: 0 auto;
        .tab1 {
            .line {
                width: 100%;
                height: 50px;
                margin: 0 auto;
                float: left;
                p {
                    height: 30px;
                    width: 150px;
                    float: left;
                    text-align: left;
                    vertical-align: middle;
                    float: left;
                    font-size: 12px;
                    color: #495060;
                    line-height: 1;
                    padding: 10px 12px 10px 0;
                    box-sizing: border-box;
                }
                .input-container {
                    width: 300px;
                    float: left;
                }
                .btn {
                    float: left;
                    margin-left: 20px;
                }
            }
        }
        .tab2 {
            .logo {
                width: 100%;
                margin: 10px auto;
                float: left;
                height: 90px;
                p {
                    width: 150px;
                    float: left;
                    text-align: left;
                    vertical-align: middle;
                    float: left;
                    font-size: 12px;
                    color: #495060;
                    padding: 10px 12px 10px 0;
                    box-sizing: border-box;
                    line-height: 90px;
                }
                .img {
                    float: left;
                    height: 90px;
                }
                .btn {
                    float: left;
                    margin: 30px 20px 0;
                }
            }
            .er_code {
                width: 100%;
                margin: 10px auto;
                float: left;
                height: 90px;
                p {
                    width: 150px;
                    float: left;
                    text-align: left;
                    vertical-align: middle;
                    float: left;
                    font-size: 12px;
                    color: #495060;
                    padding: 10px 12px 10px 0;
                    box-sizing: border-box;
                    line-height: 90px;
                }
                .img {
                    float: left;
                    height: 90px;
                }
                .btn {
                    float: left;
                    margin: 30px 20px 0;

                }
            }
        }
    }
</style>
<script>
    export default {
        data() {
            return {
                website_title_ch: '',
                company_name: '',
                company_address: '',
                zip_code: '',
                phone_number: '',
                logo_img: '',
                er_code: '',
            }
        },
        created: function () {
            let that = this
            this.$axios.get(this.$api+'/api/admin/configGet', {
                    headers: {
                        'Access-Control-Request-Method': 'Origin'
                    },
                    withCredentials: true
                })
                .then(function (response) {
                    that.website_title_ch = response.data.list.website_title_ch
                    that.company_name = response.data.list.company_name
                    that.company_address = response.data.list.company_address
                    that.zip_code = response.data.list.zip_code
                    that.phone_number = response.data.list.phone_number
                    that.logo_img = response.data.list.logo_img
                    that.er_code = response.data.list.er_code
                })
                .catch(function () {
                    that.$Notice.error({
                        title: '获取数据失败，请刷新重试',
                        desc: true ? '' : 'Here is the notification description. Here is the notification description. '
                    });
                })
        },
        methods: {
            /**
            * @function 根据提交的配置名进行更新
            * @param {String} key 配置的变量名
            */
            submit: function (key) {
                let that = this;
                this.$axios.post(this.$api+'/api/admin/configSet', {
                        'cf_name': key,
                        'cf_value': that[key]
                    }, {
                        headers: {
                            'Access-Control-Request-Method': 'Origin'
                        },
                        withCredentials: true
                    })
                    .then(function (response) {
                        that.$Notice.success({
                            title: '更新成功',
                            desc: true ? '' : 'Here is the notification description. Here is the notification description. '
                        });
                    })
                    .catch(function () {
                        that.$Notice.error({
                            title: '更新失败',
                            desc: true ? '' : 'Here is the notification description. Here is the notification description. '
                        });
                    })
            },
            /**
            *@function 上传成功触发的回调行数
            *@param {Object} response 上传成功返回的服务器回调数据
            *@param {Object} file 当文件为一个的时候存在，为文件信息
            *@param {Object} file 当文件为多个的时候存在，为文件信息数组
            *@description 使用iview 的上传文件，参考文档https://www.iviewui.com/components/upload
            */
            uploadSuccess: function (response, file, fileList) {
                if (response.state == 1) {
                    this.$Notice.success({
                        title: '上传成功',
                        desc: true ? '' : 'Here is the notification description. Here is the notification description. '
                    });
                } else {
                    this.$Notice.error({
                        title: '上传失败',
                        desc: true ? '' : 'Here is the notification description. Here is the notification description. '
                    });
                }
            },
            /**
            *@function 上传失败触发的回调函数
            *@description 使用iview 的上传文件，参考文档https://www.iviewui.com/components/upload
            */
            uploadError: function () {
                this.$Notice.error({
                    title: '上传失败',
                    desc: true ? '' : 'Here is the notification description. Here is the notification description. '
                });
            }
        }
    }
</script>